<template>
  <view>
    <u-navbar title="签到" is-fixed="true" z-index="999" :background="background" back-icon-name="plus-circle"
      back-icon-size="45" :custom-back="addActivity" :border-bottom="false"></u-navbar>
    <view class="upload" @click="chooseDutyFile">
      <image src="https://typora-licodeao.oss-cn-guangzhou.aliyuncs.com/typoraImg/duty.jpg" class="img1"></image>
      <view class="textBox">
        <view class="topText">快速上传值日表</view>
        <view class="bottomText">支持xlsx表格 | 当前学期值日表</view>
      </view>
    </view>
    <!-- 查看值日表 -->
    <view class="duty">
      <uni-collapse @change="getUserList">
        <uni-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index" title-border="none">
          <uni-group mode="card">
            <view class="tableStyle">
              <view class="table">
                <view class="tr">
                  <view class="th">星期一</view>
                  <view class="th">星期二</view>
                  <view class="th">星期三</view>
                  <view class="th">星期四</view>
                  <view class="th">星期五</view>
                </view>
                <block>
                  <view class="tr">
                    <view class="td" v-for="mon in monDayList">{{format(mon[0].onDutyUserName)[0]}}</view>
                    <view class="td" v-for="tue in tuesDayList">{{format(tue[0].onDutyUserName)[0]}}</view>
                    <view class="td" v-for="wen in wensDayList">{{format(wen[0].onDutyUserName)[0]}}</view>
                    <view class="td" v-for="thr in thurDayList">{{format(thr[0].onDutyUserName)[0]}}</view>
                    <view class="td" v-for="fri in friDayList">{{format(fri[0].onDutyUserName)[0]}}</view>
                  </view>
                  <view class="tr">
                    <view class="td" v-for="mon in monDayList">{{format(mon[0].onDutyUserName)[1]}}</view>
                    <view class="td" v-for="tue in tuesDayList">{{format(tue[0].onDutyUserName)[1]}}</view>
                    <view class="td" v-for="wen in wensDayList">{{format(wen[0].onDutyUserName)[1]}}</view>
                    <view class="td" v-for="thr in thurDayList">{{format(thr[0].onDutyUserName)[1]}}</view>
                    <view class="td" v-for="fri in friDayList">{{format(fri[0].onDutyUserName)[1]}}</view>
                  </view>
                </block>
              </view>
            </view>
          </uni-group>
        </uni-collapse-item>
      </uni-collapse>
    </view>
  </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        serverUrl: this.$globalUrl,
        realName: uni.getStorageSync("realName"),
        siginList: [],
        background: {
          backgroundColor: '#F6F6F6'
        },
        itemList: [{
          head: "查看本学期值日排班表"
        }],
        monDayList: [],
        tuesDayList: [],
        wensDayList: [],
        thurDayList: [],
        friDayList: []
      }
    },
    methods: {
      addActivity() {
        uni.showToast({
          icon: 'error',
          title: '请等待下一个版本',
          duration: 2000
        })
      },
      chooseDutyFile() {
        let self = this
        wx.chooseMessageFile({
          count: 1,
          extension: ['.xlsx'],
          success(res) {
            console.log("成功选择文件", JSON.stringify(res.tempFiles), res.tempFiles)
            const tempFilePaths = res.tempFiles
            wx.uploadFile({
              url: self.$globalUrl + '/user/ananlyOnDutyExcel',
              filePath: tempFilePaths[0].path,
              method: 'POST',
              name: 'file',
              file: {
                'filePath': tempFilePaths[0]
              },
              header: {
                "Authorization": uni.getStorageSync('tokenHead') + ' ' + uni.getStorageSync('token')
              },
              success(res) {
                console.log(JSON.parse(res.data))
                let result = JSON.parse(res.data)
                if (result.code === 401) {
                  uni.showToast({
                    icon: "error",
                    title: '请先登录再上传',
                    duration: 2000
                  })
                } else if (result.status === 500) {
                  uni.showToast({
                    icon: "error",
                    title: '请选择正确的格式',
                    duration: 2000
                  })
                } else if (result.code === 200) {
                  uni.showToast({
                    icon: 'success',
                    title: '上传成功',
                    duration: 2000
                  })
                }
              }
            })
          }
        })
      },
      getUserList() {
        let that = this
        if (that.monDayList.length === 0 && that.tuesDayList.length === 0 && that.wensDayList.length === 0 && that.thurDayList.length === 0 && that.friDayList.length === 0) {
          uni.request({
            url: that.serverUrl + '/user/ondutyList',
            method: 'GET',
            header: {
              "Authorization": uni.getStorageSync('tokenHead') + ' ' + uni.getStorageSync('token')
            },
            success(res) {
              that.monDayList.push(res.data.object.filter(item => item.weekDay === 1))
              that.tuesDayList.push(res.data.object.filter(item => item.weekDay === 2))
              that.wensDayList.push(res.data.object.filter(item => item.weekDay === 3))
              that.thurDayList.push(res.data.object.filter(item => item.weekDay === 4))
              that.friDayList.push(res.data.object.filter(item => item.weekDay === 5))   
            }
          })
        }
      },
      format(str) {
        let arr = str.slice(0, 3).split(',')
        arr.push(str.slice(3, str.length))
        return arr
      }
    }
  }
</script>

<style>
  .upload {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 95%;
    height: 100px;
    margin: 10px auto;
    background-color: #FFFFFF;
    border-radius: 30px;
  }
  
  .img1 {
    width: 130px;
    height: 90px;
    margin: 10px;
    border-radius: 30px;
  }
  
  .textBox {
    flex: 1;
    width: 50%;
    margin-left: 20px;
  }
  
  .topText {
    font-size: 20px;
    color: #242424;
  }
  
  .bottomText {
    font-size: 12px;
    color: #242424;
  }
  
  .duty {
    width: 95%;
    margin: 5px auto;
    padding: 10px;
    border-radius: 20px;
    background-color: #ffffff;
  }

  .tableStyle {
    width: 100%;
    height: 140px;
    line-height: 200px;
  }

  /* 
    以下是整个表格的样式(由于小程序并不支持表格，并且uView的表格组件不符合需求且太烂了，所以封装了一个表格，可以根据自己需求进行修改)
   */
  .table {
    font-size: 15px;
    width: 95%;
    margin: 0 auto;
  }

  /*设置行*/
  .tr {
    width: 100%;
    display: flex;
    /*垂直居中*/
    align-items: center;
    /*水平居中*/
    justify-content: center;
    /* height: 3rem; */
  }

  /*设置所有单元格*/
  .th,
  .td {
    width: 20%;
    /*文字居中*/
    text-align: center;
    /*垂直居中*/
    align-items: center;
    /*水平居中*/
    justify-content: center;
    /*和上面.tr的height对应，数值修改一样就可*/
    height: 3rem;
  }

  /*设置表格边框的边框，不想麻烦所以所有的边框都在这里写了，可以自己修改*/
  .tr,
  .th,
  .td,
  .table {
    border: 1rpx solid #ffffff;
  }

  /*标题单元格*/
  .th {
    display: flex;
    font-size: normal;
  }

  /*文字单元格*/
  .td {
    padding-top: 50rpx;
    line-height: 1px;
  }
</style>
